<template>
    <div>
        <el-card>
            <template #header>修改密码</template>
            <el-form :model="form" :rules="rules">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="form.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="UserPassword">保存</el-button>
                    <el-button @click='$router.push({ name: "UserCenterIndex" })'>取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script>
import { UserPassword } from "@/api/users";
export default {
    data() {
        return {
            rules: {
                oldPassword: [
                    { required: true, message: "请填写旧密码" },
                    { min: 6, max: 18, message: "长度在 6 到 18 个字符" },
                ],
                newPassword: [
                    { required: true, message: "新密码不能为空" },
                    { min: 6, max: 18, message: "长度在 6 到 18 个字符" },
                    {
                        validator: (rule, value, cb) => {
                            if (this.form.oldPassword == value) {
                                cb(new Error("新密码并不能与旧密码一样"));
                            } else {
                                cb();
                            }
                        },
                    },
                ],
            },
            form: {},
        };
    },
    methods: {
        async UserPassword() {
            try {
                await UserPassword({
                    oldPassword: this.form.oldPassword,
                    newPassword: this.form.newPassword,
                });
                this.$message.success("密码修改成功");
                this.$router.push({ name: "UserCenterIndex" });
            } catch (error) { }
        },
    },
};
</script>
  